<template>
  <div class="wrap">
    <div class="header">
      <select-platform v-model="queryParams.platformType" @change="changePlatform" :num-arr="platformNum" v-if="$store.getters.platformNum > 1" :disdisabled="loading"></select-platform>

     <div class="search-item" v-if="$store.getters.roleType!='commissioner'">
        <el-radio-group v-if="userOptions.length > 1" v-model="queryParams.tabAccountType" size="small" @change="changeOption();changeOption2()" :disabled="loading">
          <el-radio-button class="mgb10" :label="1">
            按店铺筛选
          </el-radio-button>
          <el-radio-button class="mgb10" :label="2">
            按运营筛选
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="search-item" v-if="accountOptions.length > 1&&queryParams.tabAccountType==1">
        <div class="search-box" >
          <div
            ref="accountIdsCheckBox"
            class="left"
            :class="{
              'hidden-account-options': !isAccountExpend && false
            }"
            @resize="onContainerResize"
          >
            <el-checkbox
              style="display: inline-block;margin-right: 30px"
              class="mgb10"
              :indeterminate="isIndeterminateAccount"
              v-model="checkAllAccount"
              @change="handleCheckAllAccount"
              :disabled="loading"
            >
              {{ $t('common.allStores') }} ({{attrNumber(allAccountOrderNum)}})
            </el-checkbox>
            <el-checkbox
              class="mgb10"
              v-for="item in accountOptions"
              :label="item.label"
              :key="item.label"
              :value="queryParams.accountIds.indexOf(item.label) !== -1"
              @change="checkAccount(item,$event);changeOption();changeOption2();"
              :disabled="loading"
            >
              {{item.text}} ({{attrNumber(item.orderNum)}})
            </el-checkbox>
          </div>
          <div class="right" v-show="accountLine > 1" v-if="false">
            <el-tag style="cursor: pointer" @click="isAccountExpend = !isAccountExpend">{{isAccountExpend ? '收起' : '展示'}}</el-tag>
          </div>
        </div>

        <div style="height: 1px;width: 100%;background-color: #F2F2F2"></div>
      </div>
     <div class="search-item" v-if="userOptions.length > 1&&queryParams.tabAccountType==2">
       <div class="search-box" >
         <div
           class="left"
         >
           <el-checkbox
             style="display: inline-block;margin-right: 30px"
             class="mgb10"
             v-model="checkAllUser"
             @change="handleCheckAllUser"
             :disabled="loading"
           >
             全部运营
           </el-checkbox>
           <el-checkbox
             class="mgb10"
             v-for="item in userOptions"
             :label="item.label"
             :key="item.label"
             :value="queryParams.userIds.indexOf(item.label) !== -1"
             @change="checkUser(item,$event);changeOption();changeOption2();"
             :disabled="loading"
           >
             {{item.text}}({{item.orderNum}})
           </el-checkbox>
         </div>
       </div>
           <div style="height: 1px;width: 100%;background-color: #F2F2F2"></div>
     </div>

      <div class="search-item">
        <diy-date :set-day-type="30" v-model="queryParams.time" @change="changeOption();changeOption2();" :disdisabled="loading"></diy-date>
      </div>

      <div class="search-item">
        <el-radio-group v-model="queryParams.tabType" size="small" @change="changeOption();changeOption2()" :disabled="loading">
          <el-radio-button class="mgb10" :label="1">{{ $t('order.untreated') }}({{attrNumber(orderNum.untreatedNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="6">{{ $t('order.waitPicked') }}({{attrNumber(orderNum.waitPickNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="2">{{ $t('order.shipped') }}({{attrNumber(orderNum.sendNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="7">{{ $t('order.collectedItems') }}({{attrNumber(orderNum.pickedNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="8">{{ $t('order.inTransit') }}({{attrNumber(orderNum.inTransitNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="3">{{ $t('order.completed') }}({{attrNumber(orderNum.finishNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="4">
            {{$t('order.canceled')}}({{attrNumber(orderNum.cancelNum)}})
          </el-radio-button>
          <el-radio-button class="mgb10" :label="5">
              {{$t('order.returned')}}({{attrNumber(orderNum.returnNum)}})
          </el-radio-button>
          <el-radio-button class="mgb10" :label="10">
            {{$t('order.rejected')}}({{attrNumber(orderNum.rejectedNum)}})
          </el-radio-button>
          <el-radio-button class="mgb10" :label="11">
            {{$t('order.lose')}}({{attrNumber(orderNum.loseNum)}})
          </el-radio-button>
          <el-radio-button class="mgb10" :label="9">{{ $t('特殊') }}({{attrNumber(orderNum.specialNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="0">{{ $t('order.allOrders') }}({{attrNumber(orderNum.totalNum)}})</el-radio-button>
        </el-radio-group>
      </div>

      <div class="search-item">
        <div class="search-box">
          <div class="left">

            <el-select
              v-model="queryParams.goodsType"
              size="small"
              @change="changeOption"
              class="mgr10 mgb10"
              style="width: 150px"
              clearable
            >
              <el-option :label="$t('order.allListing')" value=""></el-option>
              <el-option :label="$t('order.multipleListing')" :value="1"></el-option>
              <el-option :label="$t('order.singleListing')" :value="2"></el-option>
            </el-select>

            <el-select
              v-model="queryParams.skuType"
              size="small"
              @change="changeOption"
              class="mgr10 mgb10"
              style="width: 150px"
              clearable
            >
              <el-option :label="$t('order.allVariants')" value=""></el-option>
              <el-option :label="$t('order.multipleSKU')" :value="1"></el-option>
              <el-option :label="$t('order.singleSKU')" :value="2"></el-option>
            </el-select>

            <el-select
              v-model="queryParams.logistics_type_info"
              size="small"
              class="mgr10 mgb10"
              @change="changeOption();changeOption2();"
              style="width: 150px"
              clearable>
              <el-option label="面单类型" value=""></el-option>
              <el-option label="平台面单" :value="1"></el-option>
              <el-option label="物流面单" :value="2"></el-option>
            </el-select>

            <div style="display: inline-block;">
              <span class="f14">
                {{$t('order.订单发货仓库')}}：
              </span>
              <el-radio-group class="platform-radio" v-model="queryParams.stickerType" size="small" @change="changeOption();changeOption2()" :disabled="loading">
                <el-radio-button v-for="(warehouse, index) in warehouseList" :key="index" :label="warehouse.id">{{warehouse.warehouse_name}}</el-radio-button>
                <el-radio-button :label="`authority`">{{ $t('common.官方仓') }}</el-radio-button>
                <el-radio-button :label="`other`">{{ $t('common.其他') }}</el-radio-button>
                <el-radio-button label="">{{ $t('common.全部') }}</el-radio-button>
              </el-radio-group>
            </div>

          </div>

          <div class="right">
            <div style="display: inline-block;margin-right: 20px;width: 540px">
              <el-input
                size="small"
                style="width: 280px; margin-right: 10px; margin-bottom: 10px"
                v-model="queryParams.keyword"
                :placeholder="$t('order.searchForOrderID/Listing ID/SKU')"
                @keyup.enter.native="changeOption(true)"
                clearable @clear="changeOption(false, 'clear')"></el-input>
              <el-button size="small" type="primary" @click="changeOption(true);changeOption2()">{{ $t('common.search') }}</el-button>
              <export-button :func="func" :query-params="queryParams" :exportType="'user_order_list'" :getTotal="total"></export-button>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="content">

      <el-table
          v-loading="loading"
          :data="data"
          border
          :default-sort="defaultSort"
          @sort-change="handleSortChange"
          :row-class-name="customRowClassName"
          v-tableHeightV2="{ bottomOffset: -60, additionalSelectors: ['.header', '.table-tips', '.page-wrap'] }"
          height="100px"
          ref="tableData"
        >
          <el-table-column
            prop="orderId"
            :label="$t('table.orderId')"
            align="center"
            min-width="150"
            fixed
          >
            <template slot-scope="{row}">
              <template v-if="customTipsRow(row)">
                <el-tooltip class="item" effect="dark" :content="'无运输单订单或运输单信息缺失，请手动上传收件人信息'" placement="top">
                  <span>
                    <i class="el-icon-warning" style="color: #F56C6C; margin-right: 5px;"></i>
                    {{ row.orderId }}
                  </span>
                </el-tooltip>
              </template>
              <template v-else>
                {{ row.orderId }}
              </template>
            </template>
          </el-table-column>
          <el-table-column
            prop="showName"
            :label="$t('table.store')"
            align="center"
            min-width="150"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="goodsImage"
            :label="$t('table.productCover')"
            align="center"
            width="120"
          >
            <template slot-scope="{row}">
              <template v-if="row.subOrders.length === 1">
                <div class="img-box img-one">
                  <img :src="row.subOrders[0].goodsImage" alt=""/>
                </div>
              </template>
              <template v-else>
                <div class="img-box">

                  <img
                    v-for="(subOrder) in row.subOrders.slice(0,4)"
                    :key="subOrder.subOrderId"
                    :src="subOrder.goodsImage"
                    alt=""
                  />
                </div>
              </template>
            </template>

          </el-table-column>
          <el-table-column
            prop="num"
            :label="$t('table.productQuantity')"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="amount"
            :label="$t('table.amount')"
            align="center"
            width="100"
          >
          </el-table-column>
          <!--<el-table-column-->
          <!--  prop="warehouseTypeStr"-->
          <!--  :label="$t('table.warehouse')"-->
          <!--  align="center"-->
          <!--  width="100"-->
          <!--&gt;-->
          <!--</el-table-column>-->
          <el-table-column
            prop="systemWarehouseName"
            :label="$t('table.warehouse')"
            align="center"
            width="100"
          >
            <template slot-scope="{row}">
              <template v-if="row.warehouseType === 1">
                {{ row.warehouseTypeStr }}
              </template>
              <template v-else>
                <template v-if="row.isHidden === 1">
                  其他
                </template>
                <template v-else>
                  {{ row.systemWarehouseName }}
                </template>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            prop="logisticsArr"
            :label="$t('table.logistics')"
            align="center"
            width="250"
          >
            <template slot-scope="{row}">
              <div
                v-for="(logistics, index) in row.logisticsArr"
                :key="index"
              >
                <!--<template v-if="(logistics.logistics_type === 'FedEx' || logistics.logistics_type === 'iMile') && logistics.is_manual_operation !== 1">-->
                <template v-if="logistics.logistics_type === 'FedEx' || logistics.logistics_type === 'iMile'">
                  <el-button type="text" style="color: #606266;" @click="toggleDetails(logistics)">{{logistics.tracking_number_info}}</el-button>
                  <i class="el-icon-search mgl10" style="cursor: pointer; color: #1890ff;" @click="toggleDetails(logistics)"></i>
                </template>
                <template v-else>
                  {{logistics.tracking_number_info}}
                </template>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="listing"
            :label="$t('table.ListingIDAndSKU')"
            align="center"
            min-width="300"
          >
            <template slot-scope="{row}">
              <div
                v-for="subOrder in row.subOrders"
                :key="subOrder.subOrderId"
              >
                <template v-if="queryParams.platformType === 1">
                  {{subOrder.goodsId}}
                </template>
                <template v-if="queryParams.platformType === 4">
                  {{subOrder.spuName}}
                </template>
                <template v-if="queryParams.platformType === 8">
                  {{subOrder.skuID}}
                </template>

                <template v-if="subOrder.sku">({{subOrder.sku}})</template>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="statusStr"
            :label="$t('table.status')"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="createdDate"
            :label="$t('table.createTime')"
            align="center"
            min-width="200"
            sortable="custom"
            :sort-orders="sortOrders"
          >
          </el-table-column>
          <el-table-column
            prop="dateSD"
            :label="$t('table.应送达时间')"
            align="center"
            min-width="200"
          >
            <template #header>
              <span>{{$t('table.应送达时间')}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>{{ $t('平台要求该笔订单包裹最晚送达驿站的时间') }}</template>
                <i class="el-icon-question" style="color:#409eff; margin-left:5px;"></i>
              </el-tooltip>
            </template>
            <template slot-scope="{row}">
              <template v-if="row.shipping && row.shipping.dateSD">
                {{row.shipping.dateSD || '-'}}
              </template>
              <template v-else>
                -
              </template>
            </template>
          </el-table-column>
          <el-table-column
            prop="dateDroppedOff"
            :label="$t('table.揽件时间')"
            align="center"
            min-width="200"
            sortable="custom"
            :sort-orders="sortOrders"
          >
            <template slot-scope="{row}">
              <template v-if="queryParams.platformType === 4">
                {{row.dateDroppedOff || '-'}}
              </template>
              <template v-else>
                <template v-if="row.shipping">
                <span :class="{'font-red': row.shipping && row.shipping.isOverDeadline}">
                  {{row.shipping.dateDroppedOff || '-'}}
                </span>
                </template>
                <template v-else>
                  -
                </template>
              </template>
            </template>
          </el-table-column>

          <template v-if="queryParams.platformType === 1">

            <el-table-column
              prop="mixTime"
              :label="$t('table.Completion/Cancellation/Return Time')"
              align="center"
              min-width="200"
            >
              <template slot-scope="{row}">
                <template v-if="row.orderStatus === 3">
                  {{row.finishDate || '-'}}
                </template>
                <template v-else-if="row.orderStatus === 4">
                  {{row.cancelDate || '-'}}
                </template>
                <template v-else-if="row.orderStatus === 5">
                  {{row.returnClosedTime || '-'}}
                </template>
                <template v-else>
                  -
                </template>
              </template>
            </el-table-column>

          </template>

          <template v-if="queryParams.platformType === 4">

            <el-table-column
              prop="mixTime"
              :label="$t('table.Completion/Rejection/Lose Time')"
              align="center"
              min-width="200"
            >
              <template slot-scope="{row}">
                <template v-if="row.orderStatus === 3">
                  {{row.finishDate || '-'}}
                </template>
                <template v-else-if="row.orderStatus === 4">
                  {{row.dateReturnOff || '-'}}
                </template>
                <template v-else-if="row.orderStatus === 5">
                  {{row.dateReturnOff || '-'}}
                </template>
                <template v-else-if="row.orderStatus === 9">
                  {{row.dateRejectionOff || '-'}}
                </template>
                <template v-else-if="row.orderStatus === 10">
                  {{row.dateLoseOff || '-'}}
                </template>
                <template v-else>
                  -
                </template>
              </template>
            </el-table-column>

          </template>

          <el-table-column
            prop="num"
            :label="$t('table.operate')"
            align="center"
            min-width="150"
            fixed="right"
          >
            <template slot-scope="{row}">
              <template v-if="editReceivingInformation(row)">
                <template v-if="row.receivingInformationData === null">
                  <el-button @click="receivingInformation(row)" type="primary">传收件信息</el-button>
                </template>
                <template v-else>
                  <el-button @click="receivingInformation(row)" type="warning">修改收件信息</el-button>
                </template>
              </template>
            </template>
          </el-table-column>

      </el-table>


      <div class="page-wrap">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="getData"
          :page-sizes="[10, 20, 50, 100, 500, 1000]"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      :title="(showTraceTrackingNumberInfo === null) ? `物流轨迹 ` : `物流轨迹 ` + showTraceTrackingNumberInfo"
      :visible.sync="showTraceDialog"
      width="500px"
    >
      <template v-if="showTraceData !== null">
        <div
          v-for="(traceItem, traceIndex) in showTraceData"
          :key="traceIndex"
          :style="{ color: traceIndex === 0 ? 'initial' : '#AAAAAA' }"
        >
          <template v-if="showTraceLogisticsType === 'FedEx'">
            <span>{{ traceItem.date }}</span>
            <br>
            <span v-if="traceItem.scanLocation['city'] !== null && traceItem.scanLocation['city'] !== false && traceItem.scanLocation['city'] !== undefined">【{{ traceItem.scanLocation['city'] }}】</span> <span>{{ traceItem.eventDescription }}</span>
            <br>
            <br>
          </template>
          <template v-else>
            <span>{{ traceItem.latestStatusTime }}</span>
            <br>
            <span>{{ traceItem.locusDetailed }}</span>
            <br>
            <br>
          </template>
        </div>
      </template>
      <template v-else>
        <div v-loading="showTraceLoading"></div>
      </template>
    </el-dialog>

    <el-dialog
      :title="`传收件信息`"
      :visible.sync="receivingInformationDialog"
      width="500px"
    >
      <div class="block">
        <el-form
          label-width="80px"
          :model="computedOrder"
          :rules="receivingInformationRules"
          ref="receivingInformationForm"
        >
          <el-form-item
            :label="$t('packet.收件人')"
            prop="buyerName"
          >
            <el-input v-model="computedOrder.buyerName"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('packet.联系电话')"
            prop="buyerPhone"
          >
            <el-input v-model="computedOrder.buyerPhone"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('packet.邮编')"
            prop="buyerPostalCode"
          >
            <el-input v-model="computedOrder.buyerPostalCode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('packet.地区选项')">
            <el-radio-group v-model="computedOrder.isAddressOperation">
              <el-radio :label="true">{{ $t('packet.手动填写') }}</el-radio>
              <el-radio :label="false">{{ $t('packet.地址库') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="$t('packet.地区')"
            prop="buyerCity"
            v-if="computedOrder.isAddressOperation === false"
          >
            <Cities
              :value="computedBuyerCity"
              :district="'MX'"
              @selectCity="changeCity"
            ></Cities>
          </el-form-item>
          <el-form-item
            :label="$t('packet.州')"
            prop="operationBuyerState"
            v-if="computedOrder.isAddressOperation === true"
          >
            <el-input v-model="computedOrder.operationBuyerState"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('packet.城市')"
            prop="operationBuyerCity"
            v-if="computedOrder.isAddressOperation === true"
          >
            <el-input v-model="computedOrder.operationBuyerCity"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('packet.详细地址')"
            prop="buyerAddress"
          >
            <el-input v-model="computedOrder.buyerAddress" type="text" :rows="3"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="footer">
        <el-button @click="receivingInformationDialog = false" v-show="false">取消</el-button>
        <el-button @click="receivingInformationDialog = false">取消</el-button>
        <el-button @click="saveReceivingInformation()" :loading="receivingInformationLoading" type="primary">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {attrNumber, getCountryIcon, getWareHouseName} from "@/utils/common";
import {
  getAccountOrderNumList, getAliexpressOrderList, getFaOrderList, getLogisticOrderTrace,
  getOrderAccountList,
  getTikTokOrderList,
  getOrderGoodsNum,
  getOrderList, getOrderListNum, getOrderPlatformNum,
  getSellerOrderNum, getSiOrderList, getSpOrderList, getUserBelongWarehouseList, saveReceivingInformation
} from "@/api/order";

import {deepCopy} from "@/utils";
import OrderGoodsNum from "@/views/order/components/OrderGoodsNum.vue";
import DiyDate from "@/views/order/components/DiyDate.vue";
import fa from "element-ui/src/locale/lang/fa";
import ExportButton from "@/views/order/components/ExportButton.vue";
import SelectPlatform from "@/components/SelectPlatform";
import Cities from "@/views/packetOrders/components/Cities.vue";

export default {
  name: "orderList",
  components: {
    SelectPlatform,
    ExportButton,
    DiyDate,
    Cities,
  },
  data(){
    return {
      loading: false,
      orderGoodsItemLoading: false,
      queryParams: {
        tabAccountType:1,
        type: 1,
        page: 1,
        pageSize: 20,
        tabType : 1, // 状态
        goodsType : '', //  商品类型
        skuType: '', // 库存类型
        keyword: '',
        accountIds: [], // 店铺选择
         userIds: [], // 用户选择
        time: [],
        platformType: this.$store.getters.defaultAccountTypeNum,
        stickerType: '',
        exportType: 'user_order_list',
        logistics_type_info: '',
      },
      data:[],
      total: 0,
      // 订单数量
      orderNum:{
        cancelNum: 0,
        inTransitNum: 0,
        finishNum: 0,
        ignoreNum: 0,
        returnNum: 0,
        rejectedNum: 0,
        loseNum: 0,
        sendNum: 0,
        totalNum:0,
        untreatedNum:0,
        waitPickNum: 0,
        pickedNum: 0,
        specialNum: 0,
      },
      checkAllFlag: false,
      getOrderList,
      orderGoodsItem:[], //
      checkAllCountry: true,
      attrNumber,
      checkAllAccount: true, // 是否选择了所有店铺
      checkAllUser:true,
      accountOptions: [], // 店铺的选项
      isAccountExpend: true, // 是否展示所有店铺
      accountLine: 0,
      platformNum: [],
      is_search: false,

      sortOrders: ['descending', 'ascending', null],

      defaultSort:{
        prop: 'createdDate',
        order: 'descending'
      },

      func: getOrderList,

      // 轨迹相关
      showTraceDialog: false,
      showTraceLoading: false,
      showTraceAbbreviateData: null,
      showTraceData: null,
      showTraceInfo: false,
      showTraceLogisticsType: null,
      showTraceTrackingNumberInfo: null,

      // 传收件信息相关
      receivingInformationDialog: false,
      receivingInformationLoading: false,
      computedOrder: {
        orderId: '',
        accountTypeNum: '',
        buyerName: '',
        buyerPhone: '',
        buyerPostalCode: '',
        buyerAddress: '',
        buyerState: '',
        buyerCity: '',
        buyerStateCode: '',
        isAddressOperation: true,
        operationBuyerState: '',
        operationBuyerCity: '',

      },
      receivingInformationRules: {
        buyerName: [
          { required: true, message: this.$t('packet.请输入收件人'), trigger: 'blur' },
        ],
        buyerPhone: [
          { required: true, message: this.$t('packet.请输入联系电话'), trigger: 'blur' },
        ],
        buyerPostalCode: [
          { required: true, message: this.$t('packet.请输入邮编'), trigger: 'blur' },
        ],
        buyerCity: [
          { required: true, message: this.$t('packet.请选择地区') },
        ],
        operationBuyerState:[
          { required: true, message: this.$t('packet.请填写州') },
        ],
        operationBuyerCity:[
          { required: true, message: this.$t('packet.请填写城市') },
        ],
        buyerAddress: [
          { required: true, message: this.$t('packet.请输入详细地址'), trigger: 'blur' },
        ],
      },
      warehouseList: [],
      userOptions:[],

    }
  },
  created() {
    // this.setQueryParams()
    this.queryParams.orderBy = this.defaultSort.order
    this.queryParams.orderField = this.defaultSort.prop
    // this.getUserBelongWarehouseList()
    this.getAllData()
    // this.getOrderPlatformNum();
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  computed:{
    tableData(){
      const tableDate = [];
      this.data.forEach(item=>{
        const obj = item;
        tableDate.push(obj)
      })
      return tableDate;
    },
    // 能够选择的站点
    canCheckCountry(){
      return this.countryOptions.filter(item => !item.disable);
    },
    // 判断全部站点的选择框是不是不定式
    isIndeterminate(){
      let flag = true;
      const canCheckCountry = this.canCheckCountry;
      if(canCheckCountry.length === this.queryParams.countries.length){
        flag = false
      }
      if(this.queryParams.countries.length === 0){
        flag = false
      }
      return flag
    },
    // 全部站点未处理的订单数量
    allCountryOrderNum(){
      let num = 0;
      this.countryOptions.forEach(item=>{
        num += item.num;
      })
      return num
    },
    // 店铺全选不定式
    isIndeterminateAccount(){
      let flag = true;
      if(this.queryParams.accountIds.length === 0){
        return false;
      }
      if(this.queryParams.accountIds.length === this.accountOptions.length){
        return false;
      }
      return flag;
    },
    // 全部店铺的订单数
    allAccountOrderNum(){
      let num = 0;
      this.accountOptions.forEach(item=>{
        num += item.orderNum;
      })
      return num;
    },
    // 获取当前页面几行
    computedBuyerCity() {
      return this.computedOrder.buyerCity ? [this.computedOrder.buyerState, this.computedOrder.buyerCity] : [];
    },
  },
  mounted() {
    window.addEventListener('resize', this.onWindowResize);
  },
  methods:{
    getWareHouseName,
    onWindowResize() {
      if (this.$refs.accountIdsCheckBox) {
        this.$refs.accountIdsCheckBox.dispatchEvent(new Event('resize'));
      }
    },
    async getAllData(){
      // 获取所有店铺
      // this.getAccountOrderNumList();
      this.queryParams.page = 1;
      this.checkAllAccount = true;
      await getOrderAccountList(this.queryParams)
        .then(res=>{
          // 排序
          const data = res.data;

          this.accountOptions = [];
          this.queryParams.accountIds = [];
          data.forEach(item=>{
            const obj = {
              label: item.id,
              text: item.showName,
              orderNum: item.orderNum,
            }
            this.accountOptions.push(obj);
            this.queryParams.accountIds.push(obj.label)
          })


          this.$nextTick(()=>{
            this.onContainerResize()
            this.isAccountExpend = false
          })
          //默认用户全选
          res.info.childUserList.forEach(item=>{
            const obj = {
              label: item.id,
              text: item.name,
              orderNum: 0,
            }
            this.userOptions.push(obj);
            this.queryParams.userIds.push(obj.label)
          })

        })

      this.getUserBelongWarehouseList()
    },
    // 获取授权于用户的仓库列表
    getUserBelongWarehouseList(){
      getUserBelongWarehouseList()
        .then(res =>{
          this.warehouseList = res.data;
          if (this.warehouseList.length > 0) {
            this.queryParams.stickerType = this.warehouseList[0].id;
          }
          this.getData()
          this.getOrderListNum()
          this.getOrderPlatformNum()
        })
    },
    // 获取表单数据
    getData(){
      this.loading = true
      this.func = null;
      switch (this.queryParams.platformType){
        case 1:
          this.func = getOrderList
          break;
        case 2:
          this.func = getFaOrderList
          break;
        case 3:
          this.func = getSpOrderList;
          break;
        case 4:
          this.func = getSiOrderList;
          break;
        case 6:
          this.func = getTikTokOrderList;
          break;
        case 8:
          this.func = getAliexpressOrderList;
          break;
        default:
          this.loading = false
          return;
      }
      this.func(this.queryParams)
        .then(res=>{
          const info = res.info
          this.data = res.data
          this.total = res.info.total
          this.loading = false;
      })
    },
    // 触发变更事件
    changeOption(is_search = false, type = ''){
      if (is_search == true) {
        //判断是否使用过搜索按钮
        this.is_search = true
      }
      if (type == 'clear') {
        if (this.is_search == false) {
          return
        } else {
          this.is_search = false
        }
      }

      this.queryParams.page = 1
      this.checkAllAccount = this.accountOptions.length === this.queryParams.accountIds.length;
      this.checkAllUser = this.userOptions.length === this.queryParams.userIds.length;
      this.getData()
    },
    handleSizeChange(val){
      this.queryParams.pageSize = val;
      this.queryParams.page = 1
      this.getData();
    },
    //排序
    handleSortChange(column){
      this.queryParams.orderBy = ''
      this.queryParams.orderField = ''
      if(column.order){
        this.queryParams.orderBy = column.order
        this.queryParams.orderField = column.prop
      }
      this.queryParams.page = 1;
      this.getData()
    },
    // 触发某些事件改变数据（改变聚合搜索模块 改变店铺数量）
    changeOption2(){
      this.getOrderListNum()
      this.getAccountOrderNumList()
      this.getOrderPlatformNum()
    },
    // 选择店铺
    checkAccount(account,$event){
      if(this.checkAllAccount === true){
        this.queryParams.accountIds = [account.label];
        this.checkAllAccount = false
      }else{
        const index = this.queryParams.accountIds.indexOf(account.label)
        if(index === -1){
          this.queryParams.accountIds.push(account.label)
        }else{
          this.queryParams.accountIds.splice(index,1)
        }
      }

    },
    // 选择店铺
    checkUser(account,$event){
      if(this.checkAllUser === true){
        this.queryParams.userIds = [account.label];
        this.checkAllUser = false
      }else{
        const index = this.queryParams.userIds.indexOf(account.label)
        if(index === -1){
          this.queryParams.userIds.push(account.label)
        }else{
          this.queryParams.userIds.splice(index,1)
        }
      }

    },
    // 选择所有店铺
    handleCheckAllAccount(){
      this.queryParams.accountIds = []
      if(this.checkAllAccount){
        this.accountOptions.forEach(item=>{
          this.queryParams.accountIds.push(item.label)
        })
      }
      this.changeOption();
      this.changeOption2();
    },
    // 选择所有用户
    handleCheckAllUser(){
      this.queryParams.userIds = []
      if(this.checkAllUser){
        this.userOptions.forEach(item=>{
          this.queryParams.userIds.push(item.label)
        })
      }
      this.changeOption();
      this.changeOption2();
    },
    onContainerResize(){
      return
      // const select = this.$refs.accountIdsCheckBox;
      // let offsetHeight = select.offsetHeight;
      // this.accountLine = Math.ceil(offsetHeight / 29)
    },
    // 获取订单的数量
    getOrderListNum(){
      getOrderListNum(this.queryParams)
        .then(res =>{
          this.orderNum.cancelNum = res.data.cancelNum;
          this.orderNum.inTransitNum = res.data.inTransitNum;
          this.orderNum.finishNum = res.data.finishNum;
          this.orderNum.ignoreNum = res.data.ignoreNum;
          this.orderNum.returnNum = res.data.returnNum;
          this.orderNum.rejectedNum = res.data.rejectedNum;
          this.orderNum.loseNum = res.data.loseNum;
          this.orderNum.sendNum = res.data.sendNum;
          this.orderNum.totalNum = res.data.totalNum;
          this.orderNum.untreatedNum = res.data.untreatedNum;
          this.orderNum.waitPickNum = res.data.waitPickNum;
          this.orderNum.pickedNum = res.data.pickedNum;
          this.orderNum.specialNum = res.data.specialNum;
        })
    },
    // 获取店铺订单数量
    getAccountOrderNumList(){
      getOrderAccountList(this.queryParams)
        .then(res=>{
          const {data} = res
          this.accountOptions.forEach(item=>{
            item.orderNum = 0
            data.find(_data =>{
              if(_data.id === item.label){
                item.orderNum = _data.orderNum
                return true;
              }
            })
          })
        })
    },
    changePlatform(){
      // this.getUserBelongWarehouseList()
      this.getAllData()
    },
    getOrderPlatformNum(){
      getOrderPlatformNum(this.queryParams)
        .then(res=>{
          this.platformNum = deepCopy(res.data)
        })
    },

    toggleDetails(traceData){
      this.showTraceDialog = true
      this.showTraceLoading = true

      this.showTraceAbbreviateData = null
      this.showTraceData = null
      this.showTraceInfo = false
      this.showTraceLogisticsType = null
      this.showTraceTrackingNumberInfo = null

      const postData = {
        'orderId': traceData.orderId,
        'accountType': traceData.accountType,
        'trackingNumber': traceData.tracking_number,
      }

      // 发起查询
      getLogisticOrderTrace(postData)
        .then(res=>{
          this.showTraceLoading = false
          if(res.error === 0){
            this.showTraceAbbreviateData = res.data.traceAbbreviate
            this.showTraceData = res.data.trace
            this.showTraceInfo = false
            this.showTraceLogisticsType = res.data.logistics_type
            this.showTraceTrackingNumberInfo = res.data.tracking_number_info
          }else{
            if (traceData.trace !== null) {
              this.showTraceAbbreviateData = traceData.traceAbbreviate
              this.showTraceData = traceData.trace
              this.showTraceInfo = false
              this.showTraceLogisticsType = traceData.logistics_type
              this.showTraceTrackingNumberInfo = traceData.tracking_number_info
            }
          }
        })
    },

    toggleItemDetails(){
      this.showTraceInfo = !this.showTraceInfo
    },

    receivingInformation(row){
      this.receivingInformationDialog = true
      this.computedOrder.orderId = row.orderId
      this.computedOrder.accountTypeNum = row.accountTypeNum
      if (row.receivingInformationData === null) {
        this.computedOrder.buyerName = ''
        this.computedOrder.buyerPhone = ''
        this.computedOrder.buyerPostalCode = ''
        this.computedOrder.buyerAddress = ''
        this.computedOrder.buyerState = ''
        this.computedOrder.buyerCity = ''
        this.computedOrder.buyerStateCode = ''
        this.computedOrder.isAddressOperation = true
        this.computedOrder.operationBuyerState = ''
        this.computedOrder.operationBuyerCity = ''
        if(row.shipping){
          this.computedOrder.buyerName = row.shipping.receiverName || ''
          this.computedOrder.buyerPhone = row.shipping.receiverPhone || ''
          this.computedOrder.buyerPostalCode = row.shipping.zipCode || ''
          this.computedOrder.operationBuyerState = row.shipping.state || ''
          this.computedOrder.operationBuyerCity = row.shipping.city || ''
          this.computedOrder.buyerAddress = row.shipping.address || ''
        }
      } else {
        this.computedOrder.buyerName = row.receivingInformationData.buyer_name
        this.computedOrder.buyerPhone = row.receivingInformationData.buyer_phone
        this.computedOrder.buyerPostalCode = row.receivingInformationData.buyer_postal_code
        this.computedOrder.buyerAddress = row.receivingInformationData.buyer_address
        this.computedOrder.buyerState = row.receivingInformationData.buyer_state
        this.computedOrder.buyerCity = row.receivingInformationData.buyer_city
        this.computedOrder.buyerStateCode = row.receivingInformationData.buyer_state_code
        this.computedOrder.isAddressOperation = row.receivingInformationData.is_address_operation
        if (this.computedOrder.isAddressOperation === true) {
          this.computedOrder.operationBuyerState = row.receivingInformationData.buyer_state
          this.computedOrder.operationBuyerCity = row.receivingInformationData.buyer_city
        } else {
          this.computedOrder.operationBuyerState = ''
          this.computedOrder.operationBuyerCity = ''
        }
      }
    },

    saveReceivingInformation(){
      this.$refs.receivingInformationForm.validate(valid =>{
        if(valid){
          this.receivingInformationLoading = true
          saveReceivingInformation(this.computedOrder)
            .then(res=>{
              this.receivingInformationLoading = false
              this.receivingInformationDialog = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message);
              }
            })
        }
      })
    },

    changeCity(value) {
      this.computedOrder.buyerState = value.buyerState;
      this.computedOrder.buyerCity = value.buyerCity;
      this.computedOrder.buyerStateCode = value.buyerStateCode;
    },
    // 是否能编辑物流地址
    editReceivingInformation(row){
      return row.accountTypeNum === 1 && row.orderStatus === 1 &&
        (row.shipping === '' || row.shipping === null || row.shipping === false || row.shipping === undefined || row.shipping.subStatus === 'cost_exceeded' || (!row.shipping.addressIsComplete && row.shipping.logisticMode === 'custom'))
    },
    // 是否需要提示
    customTipsRow(row){
      return this.editReceivingInformation(row) && row.receivingInformationData === null
    },
    customRowClassName({row}){
      if (this.customTipsRow(row)) {
        return 'highlighted-row';
      }
      return '';
    },

    // 特殊订单的提示


  },

}
</script>

<style>
.el-table .highlighted-row {
  background-color: #ffe5e5;
}
</style>

<style scoped lang="less">
.wrap {
  .footer{
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
  }
  padding: 10px 30px;
  .header{
    .search-item{
      margin-bottom: 20px;
      .search-box{
        display: flex;
        justify-content: space-between;
        .hidden-account-options {
          overflow: hidden;
          max-height: 29px;
        }
        .left{

        }
      }
    }
  }
  .page-wrap{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 0px 0 0;
  }
  .table-order{
    p{
      margin: 0;
      padding: 0;
    }
    font-size: 13px;
  }
}
.order-item{
  min-height: 200px;
  width: 100%;
}

</style>

<style lang="less">
.header{
  .el-radio-button__inner{
    padding: 8px 20px;
  }
}
.channel-form{
  &.el-form{
    .el-form-item__label{
      word-break: break-word;
    }
  }
}
.channel-box-card{
  .el-card__header{
    padding: 5px 10px;
    font-size: 12px;
    line-height: 26px;
  }
  .el-card__body{
    padding: 0;
  }
}
.query-select{
  margin-right: 20px;
}

</style>
